<template>
  <div class="student-list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设备管理</span>
      </div>

      <QuerySearch ref="querySearch" :formConfigurationItem="searchTable">
        <!-- 按钮插槽 -->
        <template v-slot:btn="slotProps">
          <div class="btn-box">
            <el-button @click="czData({})">重置</el-button>
            <el-button type="primary" @click="searchBtn(slotProps.data)">搜索</el-button>
          </div>
        </template>
      </QuerySearch>

      <div class="student-table">
        <QueryTable
          :tableConfiguration="tableConfiguration"
          :displayContent="displayContent"
          :formData="formData"
          ref="queryTable"
          :api="getTableServe"
        >
          <template v-slot:status="{ scope }">
            <el-tag type="success" v-if="scope.row.status == 1">在线</el-tag>
            <el-tag type="info" v-if="scope.row.status == 2">离线</el-tag>
          </template>
          <template v-slot:pp="{ scope }">
            <span>商汤</span>
          </template>

          <template v-slot:direction="{ scope }">
            {{
              scope.row.direction == 0
                ? '无'
                : scope.row.direction == 1
                ? '进'
                : scope.row.direction == 2
                ? '出'
                : '未知'
            }}
          </template>

          <template v-slot:btn="{ scope }">
            <el-button type="primary" size="small" @click="openDoorOne(scope.row)">远程开门</el-button>
            <el-button type="info" size="small" @click="openHistorical(scope.row)">历史状态</el-button>
          </template>
        </QueryTable>
      </div>
    </el-card>

    <HistoricalRecords ref="historicalRecords" />
  </div>
</template>

<script>
import QueryTable from '@/components/queryTable/index.vue';
import QuerySearch from '@/components/querySearch/index.vue';

import HistoricalRecords from './historicalRecords.vue';

import { sysdeviceslist, senseLinkopendoor } from '@/api/comment/EquipmentList.js';
import { sysdevicesselect } from '@/api/comment/permission.js';

export default {
  components: {
    QueryTable,
    QuerySearch,
    HistoricalRecords
  },
  data() {
    return {
      getTableServe: sysdeviceslist,
      //配置文件
      displayContent: {
        height: '57vh',
        indexFixed: true,
        selectionFixed: true,
        selection: false,
        index: true,
        paginationShow: true
      },
      formData: {
        core: true
      }, //传给后端的参数
      tableConfiguration: [
        {
          prop: 'name',
          label: '设备名称',
          width: '260',
          align: 'center'
        },
        {
          prop: 'location',
          label: '位置',
          width: '260',
          align: 'center'
        },
        {
          prop: 'status',
          label: '设备状态',
          width: '260',
          align: 'center',
          sockets: true
        },
        {
          prop: 'pp',
          label: '品牌',
          width: '260',
          align: 'center',
          sockets: true
        },
        {
          prop: 'direction',
          label: '设备方向',
          width: '260',
          align: 'center',
          sockets: true
        },
        {
          prop: 'serialNumber',
          label: '设备编号',
          width: '260',
          align: 'center'
        },

        {
          label: '操作',
          prop: 'btn',
          width: '220px',
          align: 'center',
          fixed: 'right',
          sockets: true
        }
      ],
      //搜索列表配置
      searchTable: [
        {
          span: 4,
          type: 'input',
          placeholder: '设备名称',
          value: 'name'
        },
        {
          span: 4,
          type: 'input',
          placeholder: '设备位置',
          value: 'location'
        },

        {
          span: 4,
          type: 'select',
          placeholder: '设备在线状态',
          value: 'status',
          options: [
            {
              value: 1,
              label: '在线'
            },
            {
              value: 2,
              label: '离线'
            }
          ]
        },

        {
          span: 4,
          type: 'select',
          placeholder: '设备方向',
          value: 'direction',
          options: [
            {
              value: 0,
              label: '无'
            },
            {
              value: 1,
              label: '进'
            },
            {
              value: 2,
              label: '出'
            }
          ]
        },
        {
          span: 4,
          type: 'select',
          placeholder: '区域',
          multiple: true,
          optionsConfig: {
            label: 'name'
          },
          value: 'GIDS',
          options: []
        },

        {
          span: 4,
          type: 'btn'
        }
      ]
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.getsysdevicesselect(); //获取区域接口
  },
  methods: {
    //搜索按钮
    searchBtn(val) {
      this.formData = { ...this.formData, ...val };
      this.$nextTick(() => {
        //处理GIDS
        if (this.formData.GIDS && this.formData.GIDS.length == 0) {
          delete this.formData.GIDS;
        }
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },

    //重置
    czData(val) {
      this.formData = {
        core: true
      };

      this.$nextTick(() => {
        this.$refs.querySearch.clearData();
        this.$refs.queryTable.handleCurrentChange(1);
      });
    },

    //历史状态
    openHistorical(val) {
      this.$refs.historicalRecords.open(val);
    },

    //远程开门
    openDoorOne(item) {
      console.log(item);
      this.$confirm('是否开门?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let res = await senseLinkopendoor({ ldid: item.ldid });
          if (res.code == 0) {
            this.$message({
              type: 'success',
              message: '开门成功'
            });
          } else {
            this.$message({
              type: 'error',
              message: '开门失败！'
            });
          }
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '开门失败！'
          });
        });
    },

    //获取校区
    async getsysdevicesselect() {
      let res = await sysdevicesselect();
      if (res.code == 0) {
        this.searchTable.forEach((item) => {
          if (item.placeholder == '区域') {
            item.options = res.data;
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.student-list {
  width: 100%;

  box-sizing: border-box;
  padding: 10px;

  .student-table {
    margin-top: 15px;
  }

  .btn-box {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
